<template>
    <example :template-code="templateString">
        <template #describe>
            <t :id="`${$t('树选择器(单选)')}`">{{ $t('树选择器(单选)') }}</t>
            <li>
                配置<span class="d-code">is-leaf-only</span>可以控制是否只允许选择最底层的叶子节点（不包含子节点的节点叫做叶子节点）
            </li>
            <li>
                配置<span class="d-code">required</span>为<span class="s-code">true</span>时，则在点击确认按钮时，会进行必选校验，
                并且你可以通过<span class="d-code">check-leaf-tips</span>字段来定义提示文案
            </li>
            <li>
                另外请注意，与<span class="s-code">【Tree】</span>一样，如果节点数据内不存在
                <span class="s-code">"id"</span>，那么你需要通过<span class="s-code">node-key</span>指定树节点的唯一键
            </li>
            <li>当前已选择：<span class="s-code-gray">{{ selections && selections.length ? selections : '--' }}</span></li>
        </template>
        <el-button type="primary" @click="visible = true">点击打开树选择器(单选)</el-button>
        <el-button @click="isLeafOnly = !isLeafOnly">{{ isLeafOnly ? '当前仅支持选择叶子节点' : '当前支持选择任何节点' }}</el-button>
        <el-button @click="required = !required">{{ required ? '必选校验已开启' : '必选校验已关闭' }}</el-button>
        <sib-tree-picker
            title="树选择器(单选)"
            v-model="visible"
            filterable
            :required="required"
            :is-leaf-only="isLeafOnly"
            :data="treeData"
            @confirm="confirm">
        </sib-tree-picker>
    </example>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selections = ref([]);
        const visible = ref(false);
        const isLeafOnly = ref(true);
        const required = ref(true);

        return {
            visible,
            selections,
            isLeafOnly,
            required,
            treeData: [
                {
                    id: 1,
                    name: '一级 1',
                    children: [
                        {
                            id: 4,
                            name: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    name: '三级 1-1-1',
                                },
                                {
                                    id: 10,
                                    name: '三级 1-1-2',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    name: '一级 2',
                    children: [
                        {
                            id: 5,
                            name: '二级 2-1',
                        },
                        {
                            id: 6,
                            name: '二级 2-2',
                        },
                    ],
                },
                {
                    id: 3,
                    name: '一级 3',
                    children: [
                        {
                            id: 7,
                            name: '二级 3-1',
                        },
                        {
                            id: 8,
                            name: '二级 3-2',
                            children: [
                                {
                                    id: 11,
                                    name: '三级 3-2-1',
                                },
                                {
                                    id: 12,
                                    name: '三级 3-2-2',
                                },
                                {
                                    id: 13,
                                    name: '三级 3-2-3',
                                },
                            ],
                        },
                    ],
                },
            ],
            confirm(rows) {
                selections.value = rows;
            },
            templateString: `<template>
    <p>当前已选择：{{ selections && selections.length ? selections : '--' }}</p>
    <el-button type="primary" @click="visible = true">点击打开树选择器(单选)</el-button>
    <el-button @click="isLeafOnly = !isLeafOnly">{{ isLeafOnly ? '当前仅支持选择叶子节点' : '当前支持选择任何节点' }}</el-button>
    <el-button @click="required = !required">{{ required ? '必选校验已开启' : '必选校验已关闭' }}</el-button>
    <sib-tree-picker
        title="树选择器(单选)"
        v-model="visible"
        filterable
        :required="required"
        :is-leaf-only="isLeafOnly"
        :data="treeData"
        @confirm="confirm">
    </sib-tree-picker>
</template>

<script>
import { ref } from 'vue';

export default {
    setup() {
        const selections = ref([]);
        const visible = ref(false);
        const isLeafOnly = ref(true);
        const required = ref(true);

        return {
            visible,
            selections,
            isLeafOnly,
            required,
            treeData: [
                {
                    id: 1,
                    name: '一级 1',
                    children: [
                        {
                            id: 4,
                            name: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    name: '三级 1-1-1',
                                },
                                {
                                    id: 10,
                                    name: '三级 1-1-2',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    name: '一级 2',
                    children: [
                        {
                            id: 5,
                            name: '二级 2-1',
                        },
                        {
                            id: 6,
                            name: '二级 2-2',
                        },
                    ],
                },
                {
                    id: 3,
                    name: '一级 3',
                    children: [
                        {
                            id: 7,
                            name: '二级 3-1',
                        },
                        {
                            id: 8,
                            name: '二级 3-2',
                            children: [
                                {
                                    id: 11,
                                    name: '三级 3-2-1',
                                },
                                {
                                    id: 12,
                                    name: '三级 3-2-2',
                                },
                                {
                                    id: 13,
                                    name: '三级 3-2-3',
                                },
                            ],
                        },
                    ],
                },
            ],
            confirm(rows) {
                selections.value = rows;
            },
        };
    },
};
<\/script>`,
        };
    },
};
</script>
